<template>
  <div class="rightbox" v-cloak style="min-width:1000px;">
    <h1>预约列表</h1>
    <el-row  style="width: 96%;margin:2%;min-width:1000px;">
<!--       <div :span="3" style="float:left;width:120px;">
        <el-input v-model="PlanOrder" placeholder="订单号查询"></el-input>
      </div> -->
      <div :span="3" style="margin-left:0px;float: left;width:150px;">
        <el-date-picker
          style="width:150px;"
          v-model="starttime"
          type="date"
          placeholder="开始日期">
        </el-date-picker>
      </div>
      <div :span="3" style="margin-left:5px;float: left;width:150px;">
        <el-date-picker
          style="width:150px;"
          v-model="endtime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="结束日期">
        </el-date-picker>
      </div>
      <div style="margin-left:5px;float:left;width:100px;">
        <el-input v-model="name" placeholder="查询姓名"></el-input>
      </div>
      <div style="margin-left:5px;float:left;width:100px;">
        <el-input v-model="phone" placeholder="输入手机号"></el-input>
      </div>
      <div style="margin-left:5px;float:left;width:100px;">
        <el-select v-model="state" placeholder="请选择状态" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option label="已预约" value="已预约"></el-option>
          <el-option label="待付款" value="待付款"></el-option>
          <el-option label="已取消" value="已取消"></el-option>
          <el-option label="完成" value="完成"></el-option>
        </el-select>
      </div>
      <div  style="margin-left:5px;float:left;width:100px;">
        <el-button type="primary" @click="Search">查询</el-button>
      </div>
    </el-row>
    <el-table
    :data="contentList"
    border
    style="width: 96%;margin:2%">
      <el-table-column
        prop="name"
        label="预约姓名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="carded"
        width="180"
        label="身份证号">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.sex == 0">男</span>
          <span v-if="scope.row.sex == 1">女</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="预约手机号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="createtime"
        width="200"
        label="预约时间">
      </el-table-column>
      <el-table-column
        prop="time"
        width="200"
        label="预约就诊时间">
      </el-table-column>
      <el-table-column
        prop="state"
        label="预约状态">
      </el-table-column>
      <el-table-column
        prop="doctorname"
        label="预约医生">
      </el-table-column>
      <el-table-column
        prop="numbername"
        label="挂号级别">
      </el-table-column>
      <el-table-column
        prop="money"
        label="金额">
      </el-table-column>
      <el-table-column
        prop="departmentname"
        label="预约科室">
      </el-table-column>
    </el-table>
    <div class="page" v-if="total >= 5">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="pagelimit"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
  data () {
    return {
      contentList: [],
      name: '',
      PlanOrder: '',
      phone: '',
      total: '',
      pagelimit: 5,
      pageindex: '',
      starttime: '',
      endtime: '',
      state: '已预约'
    }
  },
  methods: {
    Search: function () {
      var that = this
      that.pageindex = 0
      that.total = ''
      that.getList()
    },
    getList: function () {
      var that = this
      that.$pub.open()
      axios.post('/gp/Plan/Index', qs.stringify({
        PlanOrder: that.PlanOrder,
        name: that.name,
        phone: that.phone,
        pagelimit: that.pagelimit,
        pageindex: that.pageindex,
        starttime: that.starttime,
        endtime: that.endtime,
        state: that.state
      })
      )
        .then((res) => {
          that.$pub.close()
          if (res.data.code === 0) {
            that.contentList = res.data.data.planlist
            that.total = res.data.data.total
          } else {
            that.$pub.failcode(that, res.data.code, res.data.data)
          }
        })
        .catch(function () {
          that.$pub.catchbox(that)
        })
    },
    handleCurrentChange (val) {
      var that = this
      that.pageindex = val
      that.getList()
    }
  },
  mounted () {
    var date = new Date()
    var that = this
    that.starttime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
    that.endtime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
    this.getList()
  }
}
</script>
